<script>


    $(function () {
        // $login_out = $("#login_out");
        $login = $("#login")
        $myFavorite = $("#myFavorite")
        var uid = getParameter("uid");
        $.get("/photograph/user/findOne",
            function (data) {
                if (data.flag) { // 登录状态
                    var login = '<li class="nav-item">\n' +
                        '                        <a class="nav-link nav-link-1" id="loginName" href="userIndex.html?uid=' + data.data.uid + '">admin</a>\n' +
                        '                    </li>\n' +
                        '                    <li class="nav-item">\n' +
                        '                        <a id="photo" class="nav-link nav-link-1 active" aria-current="page" href="/photograph/index.html">照片</a>\n' +
                        '                    </li>\n' +
                        '                    <li class="nav-item">\n' +
                        '                        <a class="nav-link nav-link-2" href="myfavorite.html?uid=' + data.data.uid + '" id="myFavorite">收藏</a>\n' +
                        '                    </li>\n' +
                        '                    <li class="nav-item">\n' +
                        '                        <a class="nav-link nav-link-4" href="contact.html">联系我们</a>\n' +
                        '                    </li>\n' +
                        '                    <li class="nav-item" >\n' +
                        '                        <a onclick="confirmlogout()" class="nav-link nav-link-3" href="javascript:void(0);">退出</a>\n' +
                        '                    </li>';
                    // $login_out.css("display","none");
                    $login.html(login);
                    //<a id="myFavorite" href="myfavorite.html" class="collection">我的收藏</a>
                    $("#loginName").html(data.data.name);
                    if (uid == data.data.uid) {
                        $("#photo").removeClass("active");
                        $("#myFavorite").addClass("active");
                    }
                } else { // 未登录状态
                    var logout = '<li class="nav-item">\n' +
                        '                        <a class="nav-link nav-link-1 active" aria-current="page" href="/photograph/index.html">照片</a>\n' +
                        '                    </li>\n' +
                        '                    <li class="nav-item">\n' +
                        '                        <a class="nav-link nav-link-2" href="/photograph/login.html">登录</a>\n' +
                        '                    </li>\n' +
                        '                    <li class="nav-item">\n' +
                        '                        <a class="nav-link nav-link-3" href="/photograph/register.html">注册</a>\n' +
                        '                    </li>'+
                        '                    <li class="nav-item">\n' +
                        '                        <a class="nav-link nav-link-4" href="contact.html">联系我们</a>\n' +
                        '                    </li>\n';

                    // $login_out.css("display","block");
                    $login.html(logout);
                }
            }, "json");

        //加载导航栏数据
        $.get("/photograph/CategoryServlet/findAllCid", {},
            function (data) {
                var cid = getParameter("cid");
                $navUl = $("#navUl");
                var lis = '<li ><a href="index.html">首页</a></li>';
                for (var i = 0; i < data.length; i++) {
                    if (cid == data[i].cid) {
                        lis += '<li class="nav-active"><a href="image-list.html?cid=' + data[i].cid + '">' + data[i].cname + '</a></li>';
                    } else {
                        lis += '<li ><a href="image-list.html?cid=' + data[i].cid + '">' + data[i].cname + '</a></li>';
                    }
                }
                lis += '<li ><a href="favorite_list.html">收藏排行榜</a></li>';
                $navUl.html(lis);
            }, "json")
        //视频
        const btn = $("#tm-video-control-button");
        btn.on("click", function (e) {
            const video = document.getElementById("tm-video");
            $(this).removeClass();

            if (video.paused) {
                video.play();
                $(this).addClass("fas fa-pause");
            } else {
                video.pause();
                $(this).addClass("fas fa-play");
            }
        })
    })

    // 退出登录
    function logout() {
        $.get("/photograph/user/logout",
            function (data) {
                location.href = "/photograph/index.html"
            }, "json");
    }

    function confirmlogout() {
        var mymessage = confirm('确认要退出么？')
        if(mymessage == true) {
            logout();
        } else {
            return;
        }
    }

    function search(currentPage) {
        var iname = $("#search_input").val();

        $("#searchImg").html(iname);
        $.post("/photograph/search/searchImg", {iname: iname, currentPage: currentPage},
            function (data) {

                // 1.更新数据  共x页y条
                $("#totalCountSpan").html(data.currentPage);
                $("#totalPageSpan").html(data.totalPage);
                // 2.拼接数据
                $div = $("#img_loader");
                var divList = '';
                for (var i = 0; i < data.list.length; i++) {
                    var div = '<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">\n' +
                        '            <figure class="effect-ming tm-video-item">\n' +
                        '                <img src="' + data.list[i].isrc + '" alt="Image" class="img-fluid">\n' +
                        '                <figcaption class="d-flex align-items-center justify-content-center">\n' +
                        '                    <h2>' + data.list[i].iname + '</h2>\n' +
                        '                    <a onclick="reading(' + data.list[i].iid + ')" href="photo-detail.html?iid=' + data.list[i].iid + '">View more</a>\n' +
                        '                </figcaption>\n' +
                        '            </figure>\n' +
                        '            <div class="d-flex justify-content-between tm-text-gray">\n' +
                        '                <span class="tm-text-gray-light">' + data.list[i].idate + '</span>\n' +
                        '                <span>' + data.list[i].iclick + ' views</span>\n' +
                        '            </div>\n' +
                        '        </div>';
                    divList += div;
                }
                $div.html(divList);
                // 3.拼接页码
                var start = data.currentPage - 2;
                var end = data.currentPage + 2;
                if (start < 1) {
                    start = 1;
                    end = 5;
                }
                if (end > data.totalPage) {
                    end = data.totalPage;
                    start = end - 4;
                }
                if (data.totalPage < 5) {
                    start = 1;
                    end = data.totalPage;
                }


                $pageUl = $("#pageUl");

                var pageList = '<div class="col-12 d-flex justify-content-between align-items-center tm-paging-col">';


                var prePage = data.currentPage - 1;
                if (prePage < 1) {
                    prePage = 1;
                }
                pageList += ' <a href="javascript:search(' + prePage + ')" class="btn btn-primary tm-btn-prev mb-2 ">Previous</a>\n';
                //页码
                pageList += '<div class="tm-paging d-flex">';
                for (var i = start; i <= end; i++) {
                    if (i == data.currentPage) {
                        pageList += '<a href="javascript:search(' + i + ');" class="active tm-paging-link">' + i + '</a>';
                    } else {
                        pageList += '<a href="javascript:search(' + i + ');" class="tm-paging-link">' + i + '</a>';
                    }
                }
                pageList += '</div>';
                //下一页
                var nextPage = data.currentPage + 1;
                if (nextPage > data.totalPage) {
                    nextPage = data.totalPage;
                }
                pageList += '<a href="javascript:search(' + nextPage + ');" class="btn btn-primary tm-btn-next">Next Page</a>';
                pageList += '</div>';
                $pageUl.html(pageList);
            }, "json");
    }


</script>

<header id="header">
    <div id="loader-wrapper">
        <div id="loader"></div>
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
    </div>
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <i class="fas fa-film mr-2"></i>
                光与影
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
            </button>
            <!--登录状态-->
            <!--                <ul class="navbar-nav ml-auto mb-2 mb-lg-0" id="login">-->
            <!--                    <li class="nav-item">-->
            <!--&lt;!&ndash;                        <img style="height: 38px" src="img/account.jpg"/>&ndash;&gt;-->
            <!--                        <span class="nav-link nav-link-1" id="loginName">admin</span>-->
            <!--                    </li>-->
            <!--                    <li class="nav-item">-->
            <!--                        <a class="nav-link nav-link-1 active" aria-current="page" href="/photograph/index.html">照片</a>-->
            <!--                    </li>-->
            <!--&lt;!&ndash;                    <li class="nav-item">&ndash;&gt;-->
            <!--&lt;!&ndash;                        <a class="nav-link nav-link-2" href="/photograph/login.html">登录</a>&ndash;&gt;-->
            <!--&lt;!&ndash;                    </li>&ndash;&gt;-->
            <!--                    <li class="nav-item">-->
            <!--                        <a id="myFavorite">收藏</a>-->
            <!--                    </li>-->
            <!--                    <li class="nav-item">-->
            <!--                        <a id="logout" class="nav-link nav-link-3" href="javascript:void(0);">退出</a>-->
            <!--                    </li>-->
            <!--                </ul>-->
            <!--未登录状态-->
            <ul class="navbar-nav ml-auto mb-2 mb-lg-0" id="login">
                <li class="nav-item">
                    <a class="nav-link nav-link-1 active" aria-current="page" href="/photograph/index.html">照片</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-link-2" href="/photograph/login.html">登录</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-link-3" href="/photograph/register.html">注册</a>
                </li>
                <!--                    <li class="nav-item">-->
                <!--                        <a id="myFavorite" class="nav-link nav-link-4" href="/photograph/myfavorite.html">收藏</a>-->
                <!--                    </li>-->
            </ul>
        </div>
    </nav>
    <div class="navitem">
        <ul id="navUl" class="nav">
            <li class=""><a href="index.html">首页</a></li>
            <li><a href="#">人像</a></li>
            <li><a href="#">城市风光</a></li>
            <li><a href="#">宠物</a></li>
            <li><a href="#">旅行</a></li>
            <li><a href="#">星空</a></li>
            <li><a href="#">科技</a></li>
            <li><a href="#">美食</a></li>
            <li><a href="#">自然风光</a></li>
            <li><a href="#">收藏排行榜</a></li>
        </ul>
    </div>
    <div class="tm-hero d-flex justify-content-center align-items-center" id="tm-video-container">
        <video autoplay muted loop id="tm-video">
            <source src="video/hero.mp4" type="video/mp4">
        </video>
        <i id="tm-video-control-button" class="fas fa-pause"></i>
        <form class="d-flex position-absolute tm-search-form">
            <input class="form-control tm-search-input" type="text" placeholder="Search" aria-label="Search"
                   id="search_input">
            <button class="btn btn-outline-success tm-search-btn" type="button" onclick="search()">
                <i class="fas fa-search"></i>
            </button>
        </form>
    </div>

</header>